<!-- 赞赏支付 -->
<style>
  .public_pay_container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
  }

  .public-pay_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    right: 0;
    top: 0;
    right: 0;
  }

  .public_pay_wrap {
    width: 5.18rem;
    background: url('__PUBLIC__/images/public/zs_bj.png') #ffffff no-repeat;
    background-size: 100% 1.7rem;
    padding: 0.4rem;
    box-sizing: border-box;
    min-height: 4rem;
    border-radius: 0.12rem;
    position: absolute;
    left: 50%;
    top: 15vh;
    margin-left: -2.59rem;
  }

  .public_pay_close {
    width: 0.2rem;
    height: 0.2rem;
    background: url('__PUBLIC__/images/public/zs_close.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0.2rem;
    top: 0.15rem;
  }

  .public_pay_title {
    font-size: 0.36rem;
    color: #ffffff;
    text-align: center;

  }

  .public_pay_title::after,
  .public_pay_title::before {
    content: '';
    width: 0.35rem;
    height: 0.43rem;
    background: url('__PUBLIC__/images/public/zs_left.png') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: top;
  }

  .public_pay_title::after {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    margin-left: 0.2rem;
  }

  .public_pay_title::before {
    margin-right: 0.2rem;
  }

  .public_pay-user_box {
    text-align: center
  }

  .public_pay_user {
    margin: 0.3rem 0 0.2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 0.02rem solid #999999;
    display: inline-block
  }

  .public_pay_subt {
    font-size: 0.3rem;
    color: #333333;
    font-weight: bold;
  }

  .public_pay_point {
    font-size: 0.28rem;
    color: #999999;
  }

  .public_pay_list {
    list-style: none;
    padding: 0 0.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .public_pay_item {
    margin-top: 0.2rem;
    width: 1.8rem;
    height: 0.6rem;
    line-height: 0.6rem;
    box-sizing: border-box;
    border: 0.02rem solid #989898;
    border-radius: 0.12rem;
    font-size: 0.3rem;
    color: #333333;
    text-align: center;
  }

  .public_pay_item.on {
    border: none;
    background-color: #f34f4f;
    color: #ffffff;
  }

  .public_pay_btn_title {
    font-size: 0.3rem;
    color: #f34f4f;
    text-align: center;
    margin-top: 0.4rem;
  }

  .public_pay_btn_list {
    list-style: none;
    padding: 0 0.2rem;

  }

  .public_pay_btn_item {
    margin-top: 0.2rem;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    color: #ffffff;
    font-size: 0.3rem;
    border-radius: 0.1rem;
  }

  .public_pay_btn_item.wx {
    background-color: #249a23;
  }

  .public_pay_btn_item.zfb {
    background-color: #3b9cda;
  }
</style>
<!-- 支付弹窗 -->
<div class="public_pay_container">
  <div class="public-pay_bg"></div>
  <div class="public_pay_wrap">
    <div class="public_pay_title">赞赏<span class="masterName"></span>大师</div>
    <div class="public_pay-user_box">
      <span class="public_pay_user"></span>
      <!-- <h4 class="public_pay_subt">赞赏<span class="masterName"></span>大师</h4> -->
      <p class="public_pay_point">赞赏的越多，新的一年好运越多哦</p>
    </div>
    <ul class="public_pay_list">
      <!-- 支付价格 -->
    </ul>
    <div class="public_pay_btn_box">
      <p class="public_pay_btn_title ">赞赏后查看所有测算结果</p>
      <ul class="public_pay_btn_list">
        <li class="public_pay_btn_item wx">微信支付</li>
        <li class="public_pay_btn_item zfb">支付宝支付</li>
      </ul>
    </div>
    <div class="public_pay_close"></div>
  </div>
</div>
<script>
  $(function () {
    $.getJSON("<!--{:U('Index/MultiplePay','',false)}-->", function (data) {
      if (parseInt(data.code) === 1) {
        // 初始
        $('#publicPayPopup').remove();
        $('.orderMoney').html('')
        // 数据渲染
        let payData = data.payData;
        $('.public_pay_user').css({
          'background-image': 'url(' + data.imgUrl + ')'
        })
        $('.masterName').text(data.name)
        $(".public_pay_point").text(payData[data.selectIndex].text)
        let htmltext = '';
        payData.forEach(function (item, index) {
          htmltext +=
            `<li class="public_pay_item ${index==data.selectIndex?'on':''}">${item.price}元</li>`
        });
        $('.public_pay_list').html(htmltext)
        //微信内隐藏支付宝
        window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' ?
          $('.public_pay_btn_item.zfb').hide() : '';
        // 切换价格
        $('.public_pay_list .public_pay_item').click(function () {
          let index = $(this).index();
          let self = $(this);
          if (!self.hasClass('on')) {
            $.post("<!--{:U('Index/changeOrderPay','',false)}-->", {
                payId: index
              },
              function (data) {
                let dataParse = JSON.parse(data);
                if (parseInt(dataParse.code) === 1) {
                  self.addClass("on").siblings().removeClass("on");
                  $(".public_pay_point").text(payData[index].text)
                } else {
                  console.log('切换失败')
                }
              })
          }
        })
      } else {
        var price = "<!--{$Think.cookie.price}-->" // 价格
          var priceName="<!--{$Think.cookie.priceName}-->" //统一名称
        $('.public_pay_container').remove();
        if (channel !== 'qudao227') {
          $('.orderMoney').html(
            `
          <span style="font-size:0.28rem;color:#333333;">限时特惠价:</span>
          <span style="font-size:0.28rem;color:#db4852;">${priceName}</span>
          `
          )

        //<span style="font-size:0.24rem;color:#898989;text-decoration:line-through">￥<!--{$Think.cookie.costPrice}--></span>
        }
      }
    })
    // 打开支付窗
    $('.J_payShow').click(function () {
      $('.public_pay_container').fadeIn(300)
    })
    // 关闭支付窗
    $('.public_pay_close').click(function () {
      $(".public_pay_container").fadeOut(300);
    })
    // 发起支付
    $('.public_pay_btn_item').click(control(function () {
      if ($(this).hasClass('wx')) {
        payment('wx', function (isweixin) {
          if (isweixin) {
            window.location.href =
              `<!--{:U('${server}/jieguoye','',false)}-->?ordernum=<!--{$Think.cookie.orderid}-->`
          } else {
            window.location.href = `<!--{:U('${server}/paywx','',false)}-->`
          }
        })
      } else if ($(this).hasClass("zfb")) {
        payment('zfb', function () {
          window.location.href = `<!--{:U('${server}/pay','',false)}-->`
        })
      }
    }, 500, 3000, 1))
  })

  // 支付方式
  function payment(payType, callBack) {
    if (payType === 'wx') {
      if (!window.hasOwnProperty('wx')) {
        let scriptIn = document.createElement('script')
        scriptIn.src = "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
        document.body.appendChild(scriptIn)
      }
      if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
        $.getJSON("<!--{:U('Index/multiplePayWx','',false)}-->", function (data) {
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              "appId": data.appId, //公众号名称，由商户传入
              "timeStamp": JSON.stringify(data.timeStamp), //时间戳，自1970年以来的秒数
              "nonceStr": data.nonceStr, //随机串
              "package": data.package,
              "signType": data.signType, //微信签名方式：
              "paySign": data.paySign //微信签名
            },
            function (res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                callBack && callBack('wx')
              }
            }
          )
        })
      } else {
        callBack && callBack()
      }
    } else if (payType === 'zfb') {
      callBack && callBack()
    }
  }

  /**
   * 节制
   */
  function control(method, delay, duration, controlType) {
    let timer = null;
    let flag = false;
    let start = new Date().getTime();
    return function () {
      let context = this;
      let args = arguments;
      if (controlType) {
        if (!flag) {
          method.apply(context, args);
          flag = true;
          start = new Date().getTime();
        }
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
          flag = false;
          let end = new Date().getTime();
          if (end - start >= duration) {
            method.apply(context, args);
            start = end;
          }
        }, delay)
      } else {
        let end = new Date().getTime();
        if (timer) clearTimeout(timer)
        if (end - start >= duration) {
          method.apply(context, args);
          start = end;
        } else {
          timer = setTimeout(function () {
            method.apply(context, args);
            start = new Date().getTime();
          }, delay)
        }
      }
    }
  }
</script>